<template>
  <section>

    <!--顶部的搜索栏-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="queryData">
        <el-form-item>
          <el-input v-model="queryData.keyword" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">导入</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">导出</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-table :data="listDatas" highlight-current-row v-loading="listLoading"
              element-loading-text="拼命加载中"
              @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="username" label="用户名" >
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="100"  >
      </el-table-column>
      <el-table-column prop="headImage" label="头像" sortable>
      </el-table-column>
      <el-table-column prop="age" label="年龄"  >
      </el-table-column>
      <el-table-column prop="department.name" label="部门"  >
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="pageSizes"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :current-page="currentPage"
                     :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增/修改界面-->
    <el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="dataForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="dataForm.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dataForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="dataForm.age" auto-complete="off"></el-input>
        </el-form-item>


       <el-form-item label="部门" >
         <!--
           employees:必须是一个数组,装的就是对象,应该是从后台查询出来
           :label:用于显示的名字
           :value:提交的数据--支持提交整个对象
           value-key="id" 绑定对象的时候必填的值
           clearable:可清空的下拉框
           filterable:可搜索
        -->
         <el-select v-model="dataForm.department" filterable clearable  value-key="id" placeholder="请选择">
           <el-option  v-for="dept in departments" :key="dept.id" :label="dept.name" :value="dept">
           </el-option>
         </el-select>
       </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import {batchRemoveUser} from "../../api/api";

export default {
  data() {
    return {
      listDatas:[],
      listLoading:true, //开启加载效果
      sels:[],//用户多选 选中的数据
      total:0,//记录总条数
      pageSize:5,
      pageSizes:[5, 10, 20, 50],
      currentPage:1,
      queryData:{
        keyword:''
      },
      title:'',
      dataForm:{
        id:null,
        username:"",
        password:null,
        email:"",
        age:null,
        department_id:null,
        department:null
      },
      addLoading:false,//给按钮设置加载效果
      dataFormRules: {
        username: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输出密码', trigger: 'blur' }
        ]
      },
      addFormVisible:false, //控制新增和修改弹出框 隐藏与显示
      departments:[],
    }
  },
  methods:{
    addSubmit(){
      this.$refs.dataForm.validate((valid) => {
        //valid 当前表单验证是否通过-通过true
        if (valid) {
          this.addLoading = true;
          this.$confirm('确认提交数据？', '提示', {}).then(()=>{
            //提交数据
            this.$http.put("/employee",this.dataForm).then(res=>{
              if (res.data.success){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
              }else {
                this.$message.error("操作失败了,请重新再试")
              }
              //关闭弹出框
              this.addFormVisible=false;
              //关闭按钮加载效果
              this.addLoading=false;
              //重新加载列表数据
              this.loadListData();
            })
          }).catch(()=>{
            this.$message("您以取消此操作");
          })
        }
      })

    },
    handleAdd(){
      this.title="新增";
      //清空表单数据
      this.dataForm={
        id:null,
        username:"",
        password:null,
        email:"",
        age:null,
        department_id:null,
        department:null
      }
      //显示弹出框
      this.addFormVisible=true;
    },
    handleEdit(index,row){
      console.debug(row)
      this.title="编辑";
      //做数据的回显
      this.dataForm=row;
      //打开弹出框
      this.addFormVisible=true;
    },
    handleDel(index,row){
      //row删除的当前行的数据
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/employee/"+row.id).then((res) => {
          this.listLoading = false;
          if (res.data.success){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }else {
            this.$message.error("删除失败了.请重新再试")
          }
          //重新加载列表数据
          this.loadListData();
        });
      }).catch(() => {
        this.$message("您以取消此操作");
      });

    },
    batchRemove(){//批量删除
      /*
          前端获取删除数据的id--->数组

          后台接受删除id数据--->数组,集合
          后台功能核心: delete from table where id in()
       */

      var ids = this.sels.map(item => item.id);//数组
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //let para = { ids: ids };
        this.$http.patch("/employee",ids).then((res) => {
          this.listLoading = false;
          if (res.data.success){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }else {
            this.$message.error("删除失败了.请重新再试")
          }
          //重新加载列表数据
          this.loadListData();
        });
      }).catch(() => {
        this.$message("您已取消此操作");
      });
    },
    handleCurrentChange(val){//翻页的触发次方法
      //val就是当前展示页的数据
      this.currentPage=val;
      this.loadListData();
    },
    handleSizeChange(val){
      //val 就是当前选中的每页展示多少条
      this.pageSize=val;
      this.currentPage=1;
      this.loadListData();
    },
    selsChange(sels) {//多选框触发方法,sels用户选择的列表数据
      this.sels = sels;
    },
    search(){
      this.loadListData();
    },
    //加载当前列表数据方法
    loadListData(){
      //组装高级查询和分页的代码
      let param={
        keyword:this.queryData.keyword,
        pageSize:this.pageSize,
        currentPage:this.currentPage
      }
      this.$http.post("/employee",param).then(res=>{
        console.debug(res)
        let {data,success,message}=res.data;
        this.listDatas=data.dataList;
        this.total=data.total;
        //关闭页面的加载效果
        this.listLoading=false;

      })
    },
    //查询所有部门的方法
    loadDepts(){
      this.$http.get("/department").then(res=>{
        this.departments=res.data.data;
      })
    }
  },
  mounted() {
    this.loadListData();
    this.loadDepts();

  }
}
</script>

<style scoped>

</style>